<template>
  	<select class="form-control">
	    <slot></slot>
	 </select>
</template>
<script>
  export default {
    name:'select2',
    props:['options','value'],
    data(){
      return {}
    },
    watch:{
    	value: function (value) {
	      // update value
	      $(this.$el).val(value)
	    },
    },
    mounted(){
    	let vm = this;
    	let options = this.options;

    	$(this.$el)
	      .val(this.value)
	      // init select2
	      .select2({ 
	      	data: options,
	      	minimumResultsForSearch: Infinity,
           	cache: true 
           })
	      // emit event on change.
	      .on('change',function(){
	        vm.$emit('input', this.value)
	      })
    },
    destroyed: function () {
	    $(this.$el).off().select2('destroy')
	}
  }
</script>
<style scoped lang="less">
  
</style>